<template>
  <div class="userdata">
    <head_>
      <h1>完善资料</h1>
    </head_>
    <div id="shop_address_edit">
      <!--身份证上传-->
      <div id="uploaderID">
        <div class="uploaderBox">
          <van-uploader v-model="sfz[0]" upload-text="身份证正面" :max-count="1" accept=".jpg" :after-read="afterRead1"/>
        </div>
        <div class="uploaderBox">
          <van-uploader v-model="sfz[1]" upload-text="身份证反面" :max-count="1" accept=".jpg" :after-read="afterRead2"/>
        </div>
      </div>

      <van-button type="info" @click="submit()">实名认证</van-button>

    </div>
  </div>
</template>

<script>
//导入请求
import head_ from "../jingtai_/header";
import { userdataFun } from "../../request/userinfo/userinfo";
export default {
  props: {},
  data() {
    return {
      sfz:[],
      rz:{
        pathFront:'',//身份证正面
        pathReverse:'',//身份证反面
      },
    };
  },
  created() {
    this.initUserInfo();
  },

  methods: {
    afterRead1(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      const data = new FormData();
      data.append("file", file.file); //上传的是 File 对象
      //使用axios上传文件到服务器,注意设置axios的headers为{ "Content-Type": "multipart/form-data" }
      //因为Uploader组件result-type默认为dataUrl：结果包含 File 对象，以及文件对应的 base64 编码。所以FormData接收的参数应该是file.file,
      this.$http.post("/common/upload/sure",data).then(resp=>{
        this.rz.pathFront = resp.data.data;
        this.sfz[0].url = resp.data.data;
      })
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      const data = new FormData();
      data.append("file", file.file); //上传的是 File 对象
      //使用axios上传文件到服务器,注意设置axios的headers为{ "Content-Type": "multipart/form-data" }
      //因为Uploader组件result-type默认为dataUrl：结果包含 File 对象，以及文件对应的 base64 编码。所以FormData接收的参数应该是file.file,
      this.$http.post("/common/upload/sure",data).then(resp=>{
        this.rz.pathReverse = resp.data.data;
        this.sfz[1].url = resp.data.data;

      })
    },

    // 表单验证
    submit() {
      this.$http.put("/client/updatesfz",this.rz).then(result => {
        if (result.data.code===200) {
          this.$message.success(result.data.msg);
        }
      })
    },
  },
  components: { head_ },
};
</script>

<style scoped>
  #uploaderID{
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
  }
   #uploaderID .uploaderBox{
     width: 50%;
   }
  #uploaderID .van-uploader__preview-image{
    width: 100%!important;
    height: 150px!important;
  }
  #uploaderID .van-uploader__upload{
    width: 100%!important;
    height: 150px!important;
  }
  #uploaderID .van-uploader{
    width: 100%
  }
  #uploaderID .van-uploader__input{
    height: 100%;
    width: 100%;
  }
  #shop_address_edit .van-address-edit__buttons{
    position: absolute;
    bottom: 100px;
    width: 100%;
  }
</style>
